<template>
	<div class="department-seletor">
		<div class="header">
			<div class="crumbs-box">
				<ul>
					<li :class="{'cur': index==0||index!=crumbs.length-1}" v-for="(item, index) in crumbs" @click="getDepartmentSubList(item)">
						{{item.departmentName}}
						<span v-if="index!=crumbs.length-1"><i class="icon-triangleRight"></i></span>
					</li>
				</ul>
			</div>
			<div class="department-seleted">
				<ul v-if="seletedDepartments.length>0">
					<li>已选：</li>
					<li v-for="(item, index) in seletedDepartments">
						<div class="department-name">
							<span>{{item.departmentName}}</span>
							<i class="icon-close active" @click="deleteSeletedDeparment(item.departmentId)"></i>
						</div>
					</li>
				</ul>
				<div class="no-list" v-if="seletedDepartments.length==0">
					请选择部门
				</div>
			</div>
		</div>
		<div class="section">
			<div class="section-container">
				<ul>
					<li v-for="(item, index) in departments" v-if="item.departmentType!='outerContact'">
						<dl class="group-column-3">
							<dd class="group-column">
								<label class="checkbox-1" :for="'label-'+index">
									<input type="checkbox" v-model="seletedDepartments" :value="item" :id="'label-'+index">
									<span></span>
								</label>
							</dd>
							<dd class="group-column"><label :for="'label-'+index">{{item.departmentName}}</label></dd>
							<dd class="group-column">
								<span class="btn btn-primary btn-sm outline"
								 	@click="getDepartmentSubList(item)" 
								 	v-if="isSeleted(item.departmentId)"
								>
								 	下级
								</span>
							</dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
		<div class="footer">
			<button class="btn btn-submit" @click="save" v-if="type=='add'">确定({{seletedDepartments.length}})</button>
			<button class="btn btn-submit" @click="save" v-else>确定</button>
		</div>
	</div>
</template>

<script>
	export default {

	  	name: 'department-seletor',

	  	data () {
		    return {
		    	enterprise: null,
		    	crumbs: [],
		    	departments: [],
		    	seletedDepartments: [],
		    	from: null
		    };
	  	},

	  	beforeRouteEnter (to, from, next) {
	  		next(vm => {
	  			vm.from = from;
	  		});
	  	},

	  	computed: {
	  		type () {
	  			return this.from && this.from.name == "contact_edit" ? 'edit' : 'add';
	  		}
	  	},

	  	created () {
	  		this.enterprise = this.cache.defaultEnterprise;
	  		this.initCrumbs();
	  		this.getDepartmentSubList({
	  			enterpriseId:this.enterprise.code, 
	  			departmentId:0
	  		});
	  		this.seletedDepartments = this.$store.state.departmentSeletor.departments;
	  		fxAPI.api('setAppTitle', {title: '选择部门'});
	  	},

	  	methods: {
	  		initCrumbs () {
	  			this.crumbs.push({
	  				enterpriseId: this.enterprise.enterpriseId,
	  				enterpriseName: this.enterprise.enterpriseName,
	  				departmentId: 0,
	  				departmentName: this.enterprise.enterpriseName
	  			});
	  		},

	  		recordCrumbs (data) {
	  			let isNewDepartment = true, 
	  				crumbs = [];

  				for (let i=0; i<this.crumbs.length; i++) {
	  				if (data.departmentId == this.crumbs[i].departmentId) {
	  					isNewDepartment = false;
	  					break;
	  				}
	  			}

	  			if (isNewDepartment) {
	  				this.crumbs.push({
	  					enterpriseId: this.enterprise.enterpriseId,
		  				enterpriseName: this.enterprise.enterpriseName,
		  				departmentId: data.departmentId,
		  				departmentName: data.departmentName
	  				});
	  			}

	  			for (let i=0; i<this.crumbs.length; i++) {
	  				crumbs.push(this.crumbs[i]);
	  				if (data.departmentId == this.crumbs[i].departmentId) {
	  					break;
	  				}
	  			}

	  			this.crumbs = crumbs;
	  		},

	  		getDepartmentSubList (item) {
	  			this.$http.post(this.api.eab, {
	  				module: 'department',
	  				action: 'getChildDepartments',
	  				departmentId: item.departmentId
	  			}).then(
	  				res => {
	  					if (res.body.result === 1) {
	  						let departments = [];
	  						res.body.data&&res.body.data.list.forEach(v => {
	  							departments.push({
	  								departmentId: v.departmentId,
	  								departmentName: v.departmentName
	  							});
	  						});
	  						this.departments = departments;
	  						this.recordCrumbs(item);
	  					}
	  				}
	  			);
	  		},

	  		deleteSeletedDeparment (id) {
	  			let newArray = [];
	  			for (let i=0; i<this.seletedDepartments.length; i++) {
	  				if (id != this.seletedDepartments[i].departmentId) {
	  					newArray.push(this.seletedDepartments[i]);
	  				}
	  			}
	  			this.seletedDepartments = newArray;
	  		},

	  		isSeleted (id) {
	  			let isPass = true;
	  			for (let i=0; i<this.seletedDepartments.length; i++) {
	  				if (id == this.seletedDepartments[i].departmentId) {
	  					isPass = false;
	  					break;
	  				}
	  			}
	  			return isPass;
	  		},

	  		save () {
	  			this.$store.commit('departmentSeletorSet', this.seletedDepartments);
	  			setTimeout(() => {
	  				this.$router.go(-1);
	  			}, 100);
	  		}
	  	},
	  	watch: {
	  		'seletedDepartments' (a, b) {
	  			a.forEach(v => {
	  				if (v.departmentId == '0') {
	  					this.deleteSeletedDeparment('0');
	  				}
	  			});
	  			if (this.type=="edit" && a.length>1) {
	  				this.seletedDepartments = [a[a.length-1]];
	  			}
	  		}
	  	}
	};
</script>

<style lang="scss" scoped>
	@import '../scss/mixin.scss';
	.department-seletor{
		@include app-top-main-bottom(200px, 110px);

		.header{
			>div{
				width: 100%;
				height: 100px;
				background: #FFF;
			}

			.crumbs-box{
				position: relative;
				width: 100%;
				height: 100px;
				background: #fff;
				@include border-1px(#dcdcdc);
				
				ul{
					width: 100%;
					height: 100px;
					line-height: 100px;
					white-space:nowrap;
					overflow-y: hidden;
					overflow-x: auto;
					font-size: 0;

					li{
						display: inline-block;
						position: relative;
						height: 100%;
						vertical-align: middle;
						font-size: 28px;

						&:first-child{
							padding-left: 10px;
						}

						&.cur{
							color: #a7e8de;
						}

						span{
							display: inline-block;
							width: 30px;
							height: 100px;
							position: relative;
							vertical-align: middle;
						}
					}
				}
			}

			.department-seleted{
				ul{
					width: 100%;
					font-size: 0;
					white-space: nowrap;
					overflow: auto;
					padding: 0 10px;
					box-sizing: border-box;

					li{
						display: inline-block;
						font-size: 24px;
						padding: 25px 10px;
						box-sizing: border-box;
						vertical-align: middle;

						.department-name{
							position: relative;
							display: inline-block;
							padding: 0 20px;
							height: 50px;
							line-height: 50px;
							border: 1px solid #a7e8de;
							color: #a7e8de;
							
							border-radius: 4px;
							box-sizing: border-box;
							span{
								display: inline-block;
								max-width: 250px;
								@include text-ellipsis();
							}
							.icon-close{
								right: -10px;
								top: 4px;
								left: auto;
							}
						}

					}
				}

				.no-list{
					width: 100%;
					text-align: center;
					line-height: 100px;
					font-size: 24px;
					color: #ccc;
				}
			}
		}

		.section{
			.section-container{
				padding-top: 10px;
			}
		}

		ul{
			width: 100%;
			box-sizing: border-box;
			background: #fff;
			li{
				&:last-child{
					dd{
						&:after{
							border-bottom: none !important;
						}
					}
				}
			}
		}

		.group-column-3{
			@include group-column-3(100px, 80px, 100px);
			font-size: 24px;
			.group-column:first-child:after{
				border-bottom: none;
			}
		}

		.btn{

			&.btn-submit{
				margin-top: 10px;
			}

			&.outline{
				border: none;
			}
		}

	}

</style>